<!-- 车辆详情 -->
<template>
  <div class="dashboard-container vehicle-detail">
    <div class="app-container">
      <el-container class="out">
        <div class="aside-box">
          <el-tabs v-model="currentComp">
            <el-tab-pane
              v-for="(item, index) in menu"
              :key="index"
              :label="item.name"
              :name="item.comp"
            >
            </el-tab-pane>
          </el-tabs>
        </div>

        <el-container class="in">
          <component :is="currentComp" />
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script>
import vehicleInfo from './components/vehicle-info'
import vehicleDrivingLicense from './components/vehicle-driving-license'
export default {
  // 注册组件
  components: {
    vehicleInfo,
    vehicleDrivingLicense
    // vehicleTrains
  },
  data() {
    return {
      // 当前选中的组件
      currentComp: 'vehicleInfo',
      // 当前选中的li标签
      isActive: '1',
      id: '',

      menu: [
        {
          name: '基本信息',
          value: '1',
          comp: 'vehicleInfo'
        },
        {
          name: '行驶证信息',
          value: '2',
          comp: 'vehicleDrivingLicense'
        }
      ]
    }
  },

  methods: {}
}
</script>
<style lang="scss" scoped>
.active {
  color: #ff643d;
}
</style>

<style lang="scss" scoped>
.vehicle-detail {
  /deep/ .el-container {
    flex-direction: column;
    margin-left: 0px;
  }
  .in {
    height: calc(100vh - 205px);
  }

  .aside-box {
    background: #ffffff;
    border-radius: 4px;

    padding: 24px 37px 24px 37px;
    box-sizing: border-box;

    /deep/ .el-tabs__item.is-active {
      color: #e15536;
    }

    /deep/ .el-tabs__active-bar {
      background-color: #e15536;
    }

    /deep/ .el-tabs__item:hover {
      color: #e15536;
    }
  }
}
</style>
